<template>

  <div>
    <el-tabs v-model="activeName"  @tab-click="handleClick" style="background-color: #202B61">
      <el-tab-pane label="调度方案" name="first" onselect="false">
        <label slot="label" style="color: #ffffff;font-weight: bold">调度方案</label>
        <div style="float: left;margin-left: 33px;margin-top: 15px;font-size: 18px;font-weight: bold;color: #ffffff">调度方案</div>
        <el-main >
          <el-row style="margin-top: 200px">
            <el-col :span="8">
              <div  style=" width:90px; height:90px; background-color:#1a14ff; border-radius:50px;margin-left: 100px">
                <span style="height:90px; line-height:90px; display:block; color:#FFF; text-align: center;">{{jybzm}}</span>
              </div>
              <div style="margin-top: 20px;margin-left:90px;color: #ffffff">节约标准煤(kg)</div>
            </el-col>
            <el-col :span="8">
              <div style=" width:90px; height:90px; background-color:#1a14ff; border-radius:50px;margin-left: 100px">
                <span style="height:90px; line-height:90px; display:block; color:#FFF; text-align:center">{{jycb}}</span>
              </div>
              <div style="margin-top: 20px;margin-left:90px;color: #ffffff">节省成本（元）</div>
            </el-col>
            <el-col :span="8">
              <div style=" width:90px; height:90px; background-color:#1a14ff; border-radius:50px;margin-left: 100px">
                <span style="height:90px; line-height:90px; display:block; color:#FFF; text-align:center">{{jpco2}}</span>
              </div>
              <div style="margin-top: 20px;margin-left:90px;color: #ffffff">减排CO2（kg）</div>
            </el-col>
          </el-row>
      </el-main>
      </el-tab-pane>
      <el-tab-pane label="调度运行结果" name="second">
        <label slot="label" style="color: #ffffff;font-weight: bold">调度运行结果</label>
        <div id="beforeEchart" style="width: 1100px;height: 450px;"></div>
      </el-tab-pane>
      <el-tab-pane label="调度节能减排" name="third">
        <label slot="label" style="color: #ffffff;font-weight: bold">调度节能减排</label>
        <table style="margin-top: 20px;border-collapse: collapse;color: #ffffff" >
          <tr>
            <td>碳粉尘(吨)</td>
            <td>{{JNJP.TFC}}</td>
            <td>PM2.5(吨)</td>
            <td>{{JNJP.PM}}</td>
          </tr>
          <tr>
            <td>二氧化碳(吨)</td>
            <td>{{JNJP.CO2}}</td>
            <td>煤耗量(吨)</td>
            <td>{{JNJP.Coal}}</td>
          </tr>
          <tr>
            <td>二氧化硫(吨)</td>
            <td>{{JNJP.SO2}}</td>
            <td>水耗量(吨)</td>
            <td>{{JNJP.HO}}</td>
          </tr>
          <tr>
            <td>氮氧化物(吨)</td>
            <td>{{JNJP.NO}}</td>
            <td>等效植树(棵)</td>
            <td>{{JNJP.DXZS}}</td>
          </tr>
        </table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  export default {
    created(){
      this.findJnjpResult();
      this.findYxjgResult();
    },
    data() {
      return {
        JNJP:{
          TFC: 0,
          CO2: 0,
          SO2: 0,
          NO: 0,
          PM: 0,
          Coal: 0,
          HO: 0,
          DXZS: 0
        },
        jybzm: 0,
        jycb: 0,
        jpco2: 0,
        radio: 3,
        checkList: ['电负荷', '冷负荷', '热负荷'],
        radio3: 4,
        activeName: 'first',
        result_type: "日前",
        project_id: this.$root.project_id,
        PGU: [],
        Grid: [],
        ElectricChiller: [],
        ParasiticElectricity: [],
        ElectricityLoad: [],
      };
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      drawLine(){
        // 基于准备好的dom，初始化echart1实例
        let beforeEchart = this.$echarts.init(document.getElementById('beforeEchart'))
        // 绘制图表
        beforeEchart.setOption({
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}"
          },
          toolbox: {//右上方工具栏
            show : true,
            top:10,
            right:80,
            feature : {
              mark : {show: true},
              magicType : {show: true, type: ['line', 'bar']},
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },
          grid:{//调整表位置
            top:70,
            right:70,
            bottom:60,
            left:100
          },
          legend: {//调整示例
            top:32,
            left:'center',
            data:['PGU','Grid','Electric chiller','Parasitic electricity','Electricity load'],
            textStyle:{
              color:'#ffffff'
            }
          },
          calculable : true,
          xAxis : [//调整x轴
            {
              type : 'category',
              data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
              name:"Time(h)",
              nameTextStyle:{
                fontSize:16,
                padding:[100,0,30,-510],//调整x轴示例位置
                color:'#ffffff'
              },
              axisLabel:{
                show: true,
                textStyle: {
                  color: '#ffffff'
                }
              }
            }
          ],
          yAxis : [//调整y轴
            {
              type: 'value',
              name:"Electricity(kW)",
              nameLocation:"center",
              nameGap:35,
              nameRotate:90,
              nameTextStyle:{
                fontSize: 16,
                color:'#ffffff'
              },
              //默认以千分位显示，不想用的可以在这加一段
              axisLabel : {   //调整左侧Y轴刻度， 直接按对应数据显示
                show:true,
                showMinLabel:true,
                showMaxLabel:true,
                formatter: function (value) {
                  return value;
                },
                textStyle:{
                  color:'#ffffff'
                }
              }
            },
            {
              //默认以千分位显示，不想用的可以在这加一段
              axisLabel : {   //调整左侧Y轴刻度， 直接按对应数据显示
                show:false,
                showMinLabel:true,
                showMaxLabel:true,
                formatter: function (value) {
                  return value;
                }
              }
            }
          ],
          series : [
            {
              name:'PGU',
              type:'bar',
              barGap: 0,
              color:'#ff897d',
              data:this.PGU,
              markPoint : {
                data : [
                  {type : 'max', name: '最大值'},
                  {type : 'min', name: '最小值'}
                ]
              }
            },
            {
              name:'Grid',
              type:'bar',
              color:'#1e0eff',
              data:this.Grid,
              markPoint : {
                data : [
                  {type : 'max', name: '最大值'},
                  {type : 'min', name: '最小值'}
                ]
              }
            },
            {
              name:'Electric chiller',
              type:'bar',
              color:'#ff0e1b',
              data:this.ElectricChiller,
              markPoint : {
                data : [
                  {type : 'max', name: '最大值'},
                  {type : 'min', name: '最小值'}
                ]
              }
            },
            {
              name:'Parasitic electricity',
              type:'bar',
              color:'#1cffce',
              data:this.ParasiticElectricity,
              markPoint : {
                data : [
                  {type : 'max', name: '最大值'},
                  {type : 'min', name: '最小值'}
                ]
              }
            },
            {
              name:'Electricity load',
              type:'bar',
              color:'#fffd0a',
              data:this.ElectricityLoad,
              markPoint : {
                data : [
                  {type : 'max', name: '最大值'},
                  {type : 'min', name: '最小值'}
                ]
              }
            }
            ,
          ]
        });
      },
      findJnjpResult(){
        this.$http.post("/iepsapi/dispatch/findJnjpResult?project_id="+this.project_id+"&result_type="+this.result_type).then((res)=>{
          if (res.data.flag) {
            this.JNJP.TFC=res.data.data.carbon_dust
            this.JNJP.CO2=res.data.data.co2
            this.JNJP.SO2=res.data.data.so2
            this.JNJP.NO=res.data.data.no
            this.JNJP.PM=res.data.data.pm
            this.JNJP.HO=res.data.data.water_consumption
            this.JNJP.Coal=res.data.data.coal_consumption
            this.JNJP.DXZS=res.data.data.plan_tree
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      findYxjgResult(){
        this.$http.post("/iepsapi/dispatch/findYxjgResult?project_id="+this.project_id+"&result_type="+this.result_type).then((res)=>{
          if (res.data.flag) {
            if (res.data.data.吸收式制冷机.length>1){
              this.Grid = res.data.data.吸收式制冷机;
            }
            if (res.data.data.发电机组.length>1){
              this.PGU = res.data.data.发电机组;
            }
            this.drawLine()
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
    }
  }
</script>
<style scoped>
  td {
    text-align: center;
    border: 1px blue solid;
    width: 250px;
    height: 100px;
  }
</style>

